<template>
	<view class="main">
		<view class="the">
			<view class="header">
				<u-swiper imgMode="scaleToFill" height="217px" :list="banner" keyName="url" indicator
					indicatorMode="dot" circular :autoplay="true"></u-swiper>
			</view>
			<!-- <view class="tips">温馨提示</view> -->
			<view class="buys">
				<view class="buysList" v-for="(tip,tipIndex) in buysList" :key="tipIndex">
					<view class="buysItem">
						<view class="buysName">
							{{tip.name}}
						</view>
						<view class="startTime">
							开始时间:{{tip.start_time_text}}
						</view>
						<view class="endTime">
							结束时间:{{tip.end_time_text}}
						</view>
					</view>

				</view>

			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in goodsList" :key="index">
					<view class="left">
						<image :src="image" mode=""></image>
					</view>
					<view class="right">
						<view class="price">
							{{name}}
						</view>
						<!-- <view class="name">
							￥{{item.member_price}} <text style="font-size: 12px;text-decoration: line-through;margin-left: 5px;">￥{{item.original_price}}</text>
						</view>
						<view class="name">
							11:00开团</text>
						</view> -->
						<view class="count">
							<u-number-box v-model="number" :min="1" :max="max"></u-number-box>
						</view>
						<view class="go">
							<view class="in_one">
								团购
							</view>
							<view class="in" @click="handleClick">
								预约
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		user,
		banner,
		getConfigs,
		groupsCreate,
		getBuysList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				image: '',
				name: '',
				max: 0,
				number: 1,
				goodsList: [1],
				banner: [],
				buysList: [] // 团购列表
			}
		},
		onLoad() {
			this.getInfo()
			this.getData()
			this.getBanner()
			this.tips()
		},
		methods: {
			async getInfo() {
				let res = await user()
				// console.log(res)
				this.max = res.data.has_number
			},

			async getData() {
				let res = await getConfigs({
					name: 'tuangouPic'
				})
				this.image = res.data.value

				let resp = await getConfigs({
					name: 'tuangouName'
				})
				this.name = resp.data.value
			},

			async tips() {
				let res = await getBuysList();
				console.log(res);
				this.buysList = res.data;
				console.log(123, this.buysList);
			},

			getBanner() {
				banner().then(res => {
					res.data.forEach(item => {
						this.banner.push(item.image)
					})
				})
			},

			handleClick() {
				groupsCreate({
					number: this.number
				}).then(res => {
					uni.$u.toast(res.msg)
				})
			},
			handleImage(img) {
				return 'https://new.haiqiannengyuan.com' + img
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;

		.the {
			// padding-top: 30rpx;
			// flex: 1;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			background: linear-gradient(235deg, #f6f6f6 0%, #f6f6f6 100%);

			.header {
				width: 100%;
				// height: 434rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tit {
				position: relative;
				height: 360rpx;
				// background-image: url(@/static/img/index1.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				padding-bottom: 30rpx;

				text {
					position: relative;
					z-index: 2;
				}

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 10rpx;
					left: 0;
				}
			}

			.list {
				flex: 1;
				padding: 10rpx 40rpx;

				.item {
					width: 100%;
					height: 260rpx;
					background-color: #fff;
					// background-image: url(@/static/img/shopbg.png);
					box-shadow: 5rpx 5rpx 10rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: top left;
					display: flex;
					padding: 20rpx 20rpx;
					margin-top: 20rpx;
					border-radius: 5rpx;

					.left {
						width: 36%;
						position: relative;

						image {
							width: 100%;
							height: 220rpx;
							border-radius: 8rpx;
						}

						.countDown {
							width: 100%;
							position: absolute;
							bottom: 0;
							left: 0;
							justify-content: center;
							align-items: center;
							background-color: #f6f6f6;
							border-radius: 0 0 8rpx 8rpx;

							::v-deep.u-count-down__text {
								color: #fff;
								font-size: 24rpx;
							}
						}
					}

					.right {
						width: 64%;
						display: flex;
						flex-direction: column;
						padding-left: 26rpx;
						height: 220rpx;
						justify-content: space-between;

						.name {
							color: #ed4749;
							font-size: 26rpx;
							font-weight: 700;
							overflow: hidden;
							/* 确保超出容器的内容被裁剪 */
							white-space: nowrap;
							/* 确保文本在一行内显示 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							margin-bottom: 12rpx;
						}

						.count {
							flex: 1;
							display: flex;
							justify-content: flex-end;
						}

						.price {
							font-size: 30rpx;
							color: #000;
						}

						.go {
							display: flex;
							justify-content: space-between;

							.in_one {
								font-size: 24rpx;
								background: linear-gradient(180deg, #ed4749 3%, #ed4749 100%);
								padding: 10rpx 20rpx;
								border-radius: 10rpx;
								color: #fff;
							}

							.in {
								font-size: 24rpx;
								background: linear-gradient(180deg, #ff6347 3%, #ff6347 100%);
								padding: 10rpx 20rpx;
								border-radius: 10rpx;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}

	.buys {
		margin: 10rpx 40rpx;
	}

	.buysList {
		background-color: #fff;
		box-shadow: 5rpx 5rpx 10rpx;
		background-size: 100% 100%;
		border-radius: 5rpx;
	}

	.buysItem {
		width: 100%;
		// height: 260rpx;
		display: flex;
		justify-content: space-around;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
		font-size: 14px;
	}
</style>